<template>
  <div>
    <p :key="key">foo:{{ $attrs.foo }}</p>
    <p>attrs:{{ $attrs }}</p>
    <!-- <childDomChild v-bind="$attrs"/> -->
    <childDomChild :foo1="$attrs.foo" v-on="$listeners"/>
  </div>
</template>
<script>
import childDomChild from './childDomChild'
export default {
  name: 'ChildDom',
  components: { childDomChild },
  inheritAttrs: false,
  data() {
    return {
      key: 1
    }
  },
  // props: {
  //   foo: {
  //     type: String,
  //     default: ''
  //   }
  // },
  mounted() {
    // v-bind="$attrs"：传递所有属性、v-on="$listeners"传递所有方法
    console.log(this.$attrs)
    console.log(this.$listeners)
    this.$listeners.upRocket()
  }
}
</script>
